<template>
    <view>
        <!--标题和返回-->
		<cu-custom :bgColor="NavBarColor" isBack :backRouterName="backRouteName">
			<block slot="backText">返回</block>
			<block slot="content">员工信息</block>
		</cu-custom>
		 <!--表单区域-->
		<view>
			<form>
              <!-- <my-date label="创建日期：" v-model="model.createTime" placeholder="请输入创建日期"></my-date> -->
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">员工姓名：</text></view>
                  <input  placeholder="请输入员工姓名" v-model="model.fullName"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">性别：</text></view>
				  <switch class='switch-sex' @change="SwitchC" :class="switchC?'checked':''" :checked="switchC?true:false"></switch>
                  <!-- <input  placeholder="请输入性别" v-model="model.gender"/> -->
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">手机号码：</text></view>
                  <input  placeholder="请输入手机号码" v-model="model.ontactNumber"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">身份证号：</text></view>
                  <input  placeholder="请输入身份证号" v-model="model.idCard"/>
                </view>
              </view>
			  <view class="cu-form-group">
			  	<view class="title">身份证正面：</view>
			  	<view class="grid col-4 grid-square flex-sub">
			  		<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
			  		 <image :src="imgList[index]" mode="aspectFill"></image>
			  			<view class="cu-tag bg-red radius" @tap.stop="DelImg" :data-index="index">
			  				<text class='cuIcon-close'></text>
			  			</view>
			  		</view>
			  		<view class="solids" @tap="ChooseImage" v-if="imgList.length<1">
			  			<text class='cuIcon-cameraadd'></text>
			  		</view>
			  	</view>
			  </view>
			  <view class="cu-form-group">
			  	<view class="title">身份证反面：</view>
			  	<view class="grid col-4 grid-square flex-sub">
			  		<view class="bg-img" v-for="(item,index) in imgListReverseIdCard" :key="index" @tap="ViewImageReverseIdCard" :data-url="imgListReverseIdCard[index]">
			  		 <image :src="imgListReverseIdCard[index]" mode="aspectFill"></image>
			  			<view class="cu-tag bg-red radius" @tap.stop="DelImgReverseIdCard" :data-index="index">
			  				<text class='cuIcon-close'></text>
			  			</view>
			  		</view>
			  		<view class="solids" @tap="ChooseImageReverseIdCard" v-if="imgListReverseIdCard.length<1">
			  			<text class='cuIcon-cameraadd'></text>
			  		</view>
			  	</view>
			  </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">银行卡号：</text></view>
                  <input  placeholder="请输入银行卡号" v-model="model.bankCardNumber"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">开户行：</text></view>
                  <input  placeholder="请输入开户行" v-model="model.openBank"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">开户行网点：</text></view>
                  <input  placeholder="请输入开户行网点" v-model="model.openBankBranch"/>
                </view>
              </view>
			  <view class="cu-form-group">
			  	<view class="title">银行卡照片：</view>
			  	<view class="grid col-4 grid-square flex-sub">
			  		<view class="bg-img" v-for="(item,index) in imgListBankCardPhoto" :key="index" @tap="ViewImageBankCardPhoto" :data-url="imgListBankCardPhoto[index]">
			  		 <image :src="imgListBankCardPhoto[index]" mode="aspectFill"></image>
			  			<view class="cu-tag bg-red radius" @tap.stop="DelImgBankCardPhoto" :data-index="index">
			  				<text class='cuIcon-close'></text>
			  			</view>
			  		</view>
			  		<view class="solids" @tap="ChooseImageBankCardPhoto" v-if="imgListBankCardPhoto.length<1">
			  			<text class='cuIcon-cameraadd'></text>
			  		</view>
			  	</view>
			  </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">基本工资：</text></view>
                  <input type="number" @input="onBasicSalary" placeholder="请输入基本工资" v-model="model.basicSalary"/>
                </view>
              </view>
              <!-- <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">出勤工天：</text></view>
                  <input type="number" placeholder="请输入出勤工天" v-model="model.attendanceDays"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">应发工资：</text></view>
                  <input type="number" placeholder="请输入应发工资" v-model="model.salaryPayable"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">扣预支：</text></view>
                  <input type="number" placeholder="请输入扣预支" v-model="model.paidWages"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">实发工资：</text></view>
                  <input type="number" placeholder="请输入实发工资" v-model="model.netSalary"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">考勤周期：</text></view>
                  <input  placeholder="请输入考勤周期" v-model="model.attendanceCycle"/>
                </view>
              </view> -->
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">是否离职：</text></view>
				  <switch @change="SwitchIsResign" :class="switchIsResign?'checked':''" :checked="switchIsResign?true:false"></switch>
                  
                </view>
              </view>
              <!-- <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">加班工时：</text></view>
                  <input type="number" placeholder="请输入加班工时" v-model="model.overtimeHours"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">加班工天：</text></view>
                  <input type="number" placeholder="请输入加班工天" v-model="model.overtimeDays"/>
                </view>
              </view>
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">出勤工时：</text></view>
                  <input type="number" placeholder="请输入出勤工时" v-model="model.attendanceHours"/>
                </view>
              </view> -->
              <view class="cu-form-group">
                <view class="flex align-center">
                  <view class="title"><text space="ensp">时薪：</text></view>
                  <input type="number" disabled="true" v-model="model.hourlyWage"/>
                </view>
              </view>
				<view class="padding">
					<button class="cu-btn block bg-blue margin-tb-sm lg" @click="onSubmit">
						<text v-if="loading" class="cuIcon-loading2 cuIconfont-spin"></text>提交
					</button>
				</view>
			</form>
		</view>
    </view>
</template>

<script>
    import myDate from '@/components/my-componets/my-date.vue'

    export default {
        name: "OaEmployeeInfoForm",
        components:{ myDate },
        props:{
          formData:{
              type:Object,
              default:()=>{},
              required:false
          }
        },
        data(){
            return {
				CustomBar: this.CustomBar,
				NavBarColor: this.NavBarColor,
				loading:false,
                model: {
					gender:0,
					isResign:'N'
				},
                backRouteName:'index',
				imgList: [],
				imgListReverseIdCard: [],
				imgListBankCardPhoto: [],
				uploadUrl:"/sys/common/upload",
                url: {
                  queryById: "/oa/oaEmployeeInfo/queryById",
                  add: "/oa/oaEmployeeInfo/add",
                  edit: "/oa/oaEmployeeInfo/edit",
                },
				switchC: true,
				switchIsResign: false,
            }
        },
        created(){
             this.initFormData();
        },
        methods:{
           initFormData(){
               if(this.formData){
                    let dataId = this.formData.dataId;
                    this.$http.get(this.url.queryById,{params:{id:dataId}}).then((res)=>{
                        if(res.data.success){
                            console.log("表单数据",res);
                            this.model = res.data.result;
                        }
                    })
                }
            },
            onSubmit() {
                let myForm = {...this.model};
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
                this.loading = true;
				
				if(!myForm.fullName || myForm.fullName.length==0){
					this.$tip.alert('请输入员工姓名');
					return false
				}
				if(!myForm.ontactNumber || myForm.ontactNumber.length==0){
					this.$tip.alert('请输入手机号');
					return false
				}
				if(!checkPhone.test(myForm.ontactNumber)){
					this.$tip.alert('请输入正确的手机号');
					return false
				}
				if(!myForm.idCard || myForm.idCard.length==0){
					this.$tip.alert('请输入身份证号');
					return false
				}
				if(!myForm.bankCardNumber || myForm.bankCardNumber.length==0){
					this.$tip.alert('请输入银行卡号');
					return false
				}
				if(!myForm.basicSalary || myForm.basicSalary.length==0){
					this.$tip.alert('请输入基本工资');
					return false
				}
				console.log("myForm==",myForm)
                let url = myForm.id?this.url.edit:this.url.add;
				this.$http.post(url,myForm).then(res=>{
				   console.log("res",res)
				   if(res.data.success){
					   this.$tip.toast(res.data.message)
					   // that.$tip.alert(res.data.message);
					   this.loading = false
					   this.$Router.push({name:this.backRouteName})
				   }else{
					   this.$tip.alert(res.data.message);
				   }
				}).catch(()=>{
					this.loading = false
				});
            },
			onBasicSalary(e){
				console.log(e.detail.value)
				this.model.hourlyWage='';
				if(e.detail.value>10){
					this.model.hourlyWage=e.detail.value/10
				}
			},
			SwitchC(e) {
				this.switchC = e.detail.value
				if(this.switchC){
					this.model.gender=0
				}else{
					this.model.gender=1
				}
			},
			SwitchIsResign(e) {
				this.switchIsResign = e.detail.value
				if(this.switchIsResign){
					this.model.isResign='Y'
				}else{
					this.model.isResign='N'
				}
			},
			ChooseImage() {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.model.frontIdCard=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgList = res.tempFilePaths
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgList.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImageReverseIdCard() {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.model.reverseIdCard=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgListReverseIdCard = res.tempFilePaths
					}
				});
			},
			ViewImageReverseIdCard(e) {
				uni.previewImage({
					urls: this.imgListReverseIdCard,
					current: e.currentTarget.dataset.url
				});
			},
			DelImgReverseIdCard(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgListReverseIdCard.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			},
			ChooseImageBankCardPhoto() {
				var that=this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						that.$http.upload(that.$config.apiUrl+that.uploadUrl, {
								filePath: res.tempFilePaths[0],
								name: 'file'
							})
							.then(res => {
								that.model.bankCardPhoto=res.data.message;
							})
							.catch(err => {
								that.$tip.error(err.data.message)
							});
						this.imgListBankCardPhoto = res.tempFilePaths
					}
				});
			},
			ViewImageBankCardPhoto(e) {
				uni.previewImage({
					urls: this.imgListBankCardPhoto,
					current: e.currentTarget.dataset.url
				});
			},
			DelImgBankCardPhoto(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							this.imgListBankCardPhoto.splice(e.currentTarget.dataset.index, 1)
						}
					}
				})
			}
        }
    }
</script>
<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
</style>